<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('用户列表')"/>
</head>
<body>
<div>
    <div class="layui-form">
        <div class="layui-inline">
            <label class="layui-form-label">用户角色</label>
            <div class="layui-input-inline">
                <select name="userType" lay-search="">
                    <option value="0">请选择用户角色</option>
                    <option th:each="role : ${rolesList}" th:value="${role.id}" th:text="${role.roleName}"></option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="userName" autocomplete="off" class="layui-select">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <button class="layui-btn" data-type="reload" id="table_search">搜索</button>
            </div>
        </div>
    </div>
    <table class="layui-hide" id="table"></table>
</div>
<th:block th:include="include :: footer"/>
<script>
    layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#table'
            , url: '/sysuser/list'
            , cols:
                [
                    [
                        {field: 'id', width: 80, title: 'ID', sort: true}
                        , {
                        field: 'userType', title: '用户类型', sort: true, templet: function (d) {
                            let roles = d.sysRolesList;
                            let rolesArray = [];
                            roles.forEach(role => {
                                rolesArray.push(role.roleName);
                            })
                            return rolesArray.length == 0 ? "无角色" : rolesArray.join(",");
                        }
                    }
                        , {field: 'account', title: '账号'}
                        , {field: 'userName', title: '姓名'}
                        , {field: 'createdTime', title: '创建时间', sort: true, templet: "<div>{{layui.util.toDateString(d.sbj_start, 'yyyy年-MM月-dd日 HH:mm:ss')}}</div>"}
                    ]
                ]
            , page: true
            , loading: true
            , where: {
                'orderByColumn': "su.createdTime"
                , 'isAsc': "desc"
            }
            , response: {
                statusCode: 200
            }
            , parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.total,
                    "data": res.rows
                };
            }
        });


        $("#table_search").on("click", function () {
            var userType = $("select[name='userType']").val();
            var userName = $("input[name='userName']").val();
            table.reload('table', {
                method: 'post'
                , where: {
                    'userType': userType,
                    'userName': userName,
                    'orderByColumn': "su.createdTime",
                    'isAsc': "desc"
                }
                , page: {
                    curr: 1
                }
            });
        });
    });
</script>
</body>
</html>